<template>
  <!-- 客户组件 -->
  <div class="form-project-customer-build" v-loading="loading">
    <biz-remote-select 
      v-if="isRenderSelect"
      :value="customerValue" 
      :field="field" 
      :remote-method="searchCustomer" 
      @input="updateCustomer" 
      :placeholder="$t('task.tip.searchTip', { name: $t('common.base.customer') })" 
      :computed-width-keys="['name']" 
      cleared
      value-key="id">
      <div class="customer-template-option" slot="option" slot-scope="{ option }">
        <h3>{{ option.name }}</h3>
        <p>
          <span>
            <label>{{ $t('common.base.phone') }}：</label>
            <span>{{ option.lmPhone }}</span>
          </span>
          <span>
            <label>{{ $t('common.base.serialNumber') }}：</label>
            <span>{{ option.serialNumber }}</span>
          </span>
          <span v-if="option && option.customerAddress">
            <label>{{ $t('common.base.address') }}：</label>
            <span>
              {{ formatAddress(option.customerAddress) }}
            </span>
          </span>
        </p>
      </div>
    </biz-remote-select>

    <el-button v-if="createdCustomerPermission" type="plain-third" class="ml_12" @click="handleCreateCustomer">{{ $t('common.base.create') }}</el-button>

    <!-- start 新建客户弹窗 -->
    <edit-customer-dialog ref="editCustomerDialogRef" @updateCustomerRelation="updateCustomerRelation" />
    <!-- end 新建客户弹窗 -->
  </div>
</template>
<script>
import { formatAddress } from 'pub-bbx-utils';
import FormMixin from '@src/component/form/mixin/form';
import methods from '@src/modules/task/edit/components/TaskEditForm/methods';

import EditCustomerDialog from '@src/modules/product/components/EditCustomerDialog.vue';
export default {
  name: 'form-project-customer-build',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    EditCustomerDialog,
  },
  data() {
    return {
      addCustomerDialog: false,
      loading: false,
      customerInitData: {},
      isRenderSelect: true
    };
  },
  computed: {
    customerValue() {
      return this.value;
    },
    createdCustomerPermission() {
      let initData = JSON.parse(sessionStorage.getItem('_init_data'));

      return initData?.auths?.CUSTOMER_CREATE > 0;
    }
  },
  methods: {
    formatAddress,
    ...methods.search,
    updateCustomer(newVal) {
      let currentCustomer = Array.isArray(newVal) ? newVal : [newVal];
      this.inputForValue(currentCustomer);
    },
    // 新建
    handleCreateCustomer() {
      this.isRenderSelect = false;
      this.$nextTick(() => {
        this.isRenderSelect = true;
      });
      this.$refs.editCustomerDialogRef.openDialog();
    },
    updateCustomerRelation(data) {
      let ret = {
        id: data.id,
        label: data.name,
        value: data.id,
      };
      this.updateCustomer(ret);
      this.$refs.editCustomerDialogRef.addCustomerDialog = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@src/component/form/components/FormProjectCustomer/remoteSelect.scss';
.form-project-customer-build {
  display: flex;
  flex-flow: row nowrap;
}
</style>